<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>数据 </title>
        <link rel="stylesheet" href="/css/basic.css" type="text/css"/>

        <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="/js/index.js"></script>
        <link rel="stylesheet" href="/mui/css/mui.min.css">
        <link href="/mui/css/mui.picker.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="/css/style.css" type="text/css"/>
    </head>
    <body>

    <div class="mui-content">
        <div class="data-wrapper">
            <div class="data-tab-box">
                <a href="/media/media_statistics" class="data-item">
                    新媒体数据统计
                </a>
                <a href="/media/live_statistics" class="data-item active">
                    直播数据统计
                </a>
            </div>
        </div>
        <div class="content-wrap">
            <!-- 直播数据统计 -->
            <div class="media-data-box">
                <div class="mb30">
                    <div class="input-box select" id='showUserPicker'>
                        <div id="account"></div>
                    </div>
                </div>
                <div class="data-detail-box">
                    <div class="data-detail-item">
                        <label>总粉丝数</label>
                        <div id="fanNum">
                            0
                        </div>
                    </div>
                    <div class="data-detail-item">
                        <label>总点赞数</label>
                        <div id="likeNum">
                            0
                        </div>
                    </div>
                </div>
                <div class="chart-box">
                    <div class="mui-content-padded">
                        <h5>销售走势</h5>
                        <div class="chart" id="lineChart"></div>
                        <h5>观众数据</h5>
                        <div class="chart" id="barChart"></div>
                        <h5>观众来源</h5>
                        <div class="chart" id="pieChart"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="tab-bar-box">
        <div class="tab-bar">

            <a href="/" class="tab-bar-item">
                <img src="/v3/images/tarbar/icon_home.png" alt="">
                <p>首页</p>
            </a>
            <a href="/media/data_report_m"  class="tab-bar-item">
                <img src="/v3/images/tarbar/icon_data.png" alt="">
                <p>数据</p>
            </a>
            <a href="/media/media_statistics"  class="tab-bar-item">
                <img src="/v3/images/tarbar/icon_tongji_select.png" alt="">
                <p>统计</p>
            </a>
            <a href="/mine"  class="tab-bar-item active">
                <img src="/v3/images/tarbar/icon_user_select.png" alt="">
                <p>我的</p>
            </a>


        </div>
    </div>

    </body>
    <script src="/mui/js/mui.min.js"></script>
    <script src="/mui/js/mui.picker.min.js"></script>
    <script src="/js/echarts-all.js"></script>
    <script>
        var accountId
        (function($, doc) {
            // 选择账户
            $.init();
            $.ready(function() {
                /**
                 * 获取对象属性的值
                 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
                 * @param {Object} obj 对象
                 * @param {String} param 属性名
                 */
                var _getParam = function(obj, param) {
                    return obj[param] || '';
                };
                var userPicker = new $.PopPicker();
                $.ajax({
                    url: "/ajax/getMediaList",
                    type: "get",
                    dataType:"json",
                    success:function (res) {
                        if(res.code == 0){
                            userPicker.setData(res.data);
                        }
                    }
                })
                var showUserPickerButton = doc.getElementById('showUserPicker');
                var accoutBox = doc.getElementById('account'); // 抖音账户
                showUserPickerButton.addEventListener('tap', function(event) {
                    userPicker.show(function(items) {
                        var text = items[0].text // 账户被选中的项的文字
                        accountId = items[0].value // 账户被选中的项的值
                        accoutBox.innerText = text;
                        if(accountId){
                            $.ajax({
                                url: "/ajax/getliveData",
                                type: "POST",
                                data: JSON.stringify({accountId: accountId}),
                                dataType:"json",
                                contentType: 'application/json',
                                success:function (res) {
                                    if(res.code == 0){
                                        // 线性数据
                                        var lineXdata = res.data.lineName
                                        var lineSeries = [{
                                            name: '销售数据',
                                            type: 'line',
                                            data: res.data.lineValue // 线数据
                                        }]
                                        // 柱形数据
                                        var barXdata = res.data.barName
                                        var barSeries = [{
                                            name: '观众人数',
                                            type: 'bar',
                                            data: res.data.barValue,
                                            barWidth:30// 线数据
                                        }]
                                        // 饼形数据
                                        var pieSeries = [{
                                            name: '观众来源',
                                            type: 'pie',
                                            radius: '65%',
                                            center: ['50%', '50%'],
                                            data: [{
                                                value: 335,
                                                name: '视频推荐'
                                            }, {
                                                value: 310,
                                                name: '直播广场'
                                            }, {
                                                value: 234,
                                                name: '关注页'
                                            }, {
                                                value: 135,
                                                name: '同城'
                                            }, {
                                                value: 1548,
                                                name: '其他'
                                            }]
                                        }]
                                        lineOption.xAxis  = { data:lineXdata} // 线形图x轴
                                        lineOption.series  = lineSeries // 线形图数据
                                        barOption.xAxis  = { data:barXdata} // 柱形图x轴
                                        barOption.series  = barSeries // 柱形图数据
                                        pieOption.series  = pieSeries // 饼形数据
                                        console.log(doc.getElementById('fanNum'))
                                        doc.getElementById('fanNum').innerText = res.data.userCount // 粉丝数
                                        doc.getElementById('likeNum').innerText = res.data.zanCount // 点赞数
                                        initEcharts()
                                    }
                                }
                            })
                        }
                    });
                }, false);

            });

        })(mui, document);
    </script>
    <script>
        // 线形图--销售走势
        var lineOption =  {
            grid: {
                x: 35,
                x2: 10,
                y: 30,
                y2: 25
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}'
            },
            toolbox: {
                show: false,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['line']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: false,
            // x坐标
            xAxis: [{
                type: 'category',
                data: []
            }],
            yAxis: [{
                type: 'value',
                splitArea: {
                    show: true
                }
            }],
            // 线代表量
            series: [{
                name: '销售数据',
                type: 'line',
                data: []
            }]
        }
        // 柱形图--观众数据
        var barOption =  {
            grid: {
                x: 35,
                x2: 10,
                y: 30,
                y2: 25
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}人)'
            },
            toolbox: {
                show: false,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['bar']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: false,
            xAxis: [{
                type: 'category',
                data: []
            }],
            yAxis: [{
                type: 'value',
                splitArea: {
                    show: true
                }
            }],
            series: [{
                name: '观众数据',
                type: 'bar',
                data: []
            }]
        }
        var pieOption = {

            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            calculable: false,
            series: [{
                name: '观众来源',
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                data: []
            }]
        }
        initEcharts()
        function byId(id) {
            return document.getElementById(id);
        };
        function initEcharts(){
            var barChart = echarts.init(byId('barChart'));
            barChart.setOption(barOption);
            var lineChart = echarts.init(byId('lineChart'));
            lineChart.setOption(lineOption);
            var pieChart = echarts.init(byId('pieChart'));
            pieChart.setOption(pieOption);
        }
    </script>
    
</html>